<template>
  <div class="list-table">
    <div class="area-header">
      <span class="area-header-title">{{ $t('已投GP情况') }}</span>
    </div>
    <el-form ref="queryForm" :model="queryParams" :inline="true" @submit.native.prevent>
      <el-form-item :label="$t('管理人名称')" prop="gpName">
        <el-input
          v-model="queryParams.gpName"
          :placeholder="$t('管理人名称')"
          clearable
          @keyup.enter.native="queryHandle"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="queryHandle">{{ $t('搜索') }}</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">{{ $t('重置') }}</el-button>
      </el-form-item>
    </el-form>
    <el-table v-loading="loading" tooltip-effect="darkTable" :data="bfGpInvestmentInfoList" border>
      <el-table-column width="50" align="center">
        <template slot-scope="scope">
          <el-radio v-model="gpSelectedRowId" class="radio" :label="scope.row.id" @change.native="handleCheckboxChange(scope.row)">
            {{ }}
          </el-radio>
        </template>
      </el-table-column>
      <el-table-column :label="$t('序号')" type="index" align="center" show-overflow-tooltip width="50">
        <template slot-scope="scope">
          {{ (queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column :label="$t('管理人名称')" align="center" prop="gpName" min-width="150">
        <template slot-scope="scope">
          <span class="link-type">{{ scope.row.gpName }}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('首次投资时间')" align="center" prop="firstInvestmentTime" min-width="150">
        <template slot-scope="scope">
          <span>{{ scope.row.firstInvestmentTime }}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('已投基金数量')" align="center" prop="fundCount" min-width="150">
        <template slot-scope="scope">
          <span>{{ scope.row.fundCount }}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('项目数量')" align="center" prop="dealCount" min-width="150">
        <template slot-scope="scope">
          <span>{{ scope.row.dealCount }}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('认缴总金额(万)')" align="center" prop="totalSubscribedAmount" min-width="150">
        <template slot-scope="scope">
          <span>{{ moneyFormat(scope.row.totalSubscribedAmount, 'w') }}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('实缴总金额(万)')" align="center" prop="totalPaidInAmount" min-width="150">
        <template slot-scope="scope">
          <span>{{ moneyFormat(scope.row.totalPaidInAmount, 'w') }}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('回款总金额(万)')" align="center" prop="paymentReceivedTotalAmount" min-width="150">
        <template slot-scope="scope">
          <span>{{ moneyFormat(scope.row.paymentReceivedTotalAmount, 'w') }}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('已实现收益(万)')" align="center" prop="realizedBenefits" min-width="150">
        <template slot-scope="scope">
          <span>{{ moneyFormat(scope.row.realizedBenefits, 'w') }}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('持有部分估值(万)')" align="center" prop="holdingPartialValuation" min-width="150">
        <template slot-scope="scope">
          <span>{{ moneyFormat(scope.row.holdingPartialValuation, 'w') }}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('IRR')" align="center" prop="irr" min-width="150">
        <template slot-scope="scope">
          <span>{{ scope.row.irr }}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('DPI')" align="center" prop="dpi" min-width="150">
        <template slot-scope="scope">
          <span>{{ scope.row.dpi }}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('TVPI')" align="center" prop="tvpi" min-width="150">
        <template slot-scope="scope">
          <span>{{ scope.row.tvpi }}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('RVPI')" align="center" prop="rvpi" min-width="150">
        <template slot-scope="scope">
          <span>{{ scope.row.rvpi }}</span>
        </template>
      </el-table-column>
    </el-table>

    <el-table v-if="gpSelectedRowId" v-loading="loading" tooltip-effect="darkTable" :data="bfFundInvestmentInfoList" border style="margin-top: 30px;">
      <el-table-column width="50" align="center">
        <template slot-scope="scope">
          <el-radio v-model="fundSelectedRowId" class="radio" :label="scope.row.id" @change.native="fundHandleCheckboxChange(scope.row)">
            {{ }}
          </el-radio>
        </template>
      </el-table-column>
      <el-table-column :label="$t('序号')" type="index" align="center" show-overflow-tooltip width="50">
        <template slot-scope="scope">
          {{ (queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column :label="$t('基金名称')" align="center" prop="fundName" min-width="150">
        <template slot-scope="scope">
          <span class="link-type">{{ scope.row.fundName }}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('投资时间')" align="center" prop="firstInvestmentTime" min-width="150">
        <template slot-scope="scope">
          <span>{{ scope.row.firstInvestmentTime }}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('项目数量')" align="center" prop="dealCount" min-width="150">
        <template slot-scope="scope">
          <span>{{ scope.row.dealCount }}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('认缴比例')" align="center" prop="subscriptionRatio" min-width="150">
        <template slot-scope="scope">
          <span>{{ scope.row.subscriptionRatio }}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('认缴总金额(万)')" align="center" prop="totalSubscribedAmount" min-width="150">
        <template slot-scope="scope">
          <span>{{ moneyFormat(scope.row.totalSubscribedAmount, 'w') }}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('实缴总金额(万)')" align="center" prop="totalPaidInAmount" min-width="150">
        <template slot-scope="scope">
          <span>{{ moneyFormat(scope.row.totalPaidInAmount, 'w') }}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('回款总金额(万)')" align="center" prop="paymentReceivedTotalAmount" min-width="150">
        <template slot-scope="scope">
          <span>{{ moneyFormat(scope.row.paymentReceivedTotalAmount, 'w') }}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('已实现收益(万)')" align="center" prop="realizedBenefits" min-width="150">
        <template slot-scope="scope">
          <span>{{ moneyFormat(scope.row.realizedBenefits, 'w') }}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('持有部分估值(万)')" align="center" prop="holdingPartialValuation" min-width="150">
        <template slot-scope="scope">
          <span>{{ moneyFormat(scope.row.holdingPartialValuation, 'w') }}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('IRR')" align="center" prop="irr" min-width="150">
        <template slot-scope="scope">
          <span>{{ scope.row.irr }}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('DPI')" align="center" prop="dpi" min-width="150">
        <template slot-scope="scope">
          <span>{{ scope.row.dpi }}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('TVPI')" align="center" prop="tvpi" min-width="150">
        <template slot-scope="scope">
          <span>{{ scope.row.tvpi }}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('RVPI')" align="center" prop="rvpi" min-width="150">
        <template slot-scope="scope">
          <span>{{ scope.row.rvpi }}</span>
        </template>
      </el-table-column>
    </el-table>

    <el-table v-if="fundSelectedRowId" v-loading="loading" tooltip-effect="darkTable" :data="bfDealInvestmentInfoList" border style="margin-top: 30px;">
      <el-table-column :label="$t('序号')" type="index" align="center" show-overflow-tooltip width="50">
        <template slot-scope="scope">
          {{ (queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column :label="$t('项目名称')" align="center" prop="dealName" min-width="150">
        <template slot-scope="scope">
          <span>{{ scope.row.dealName }}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('投资时间')" align="center" prop="firstInvestmentTime" min-width="150">
        <template slot-scope="scope">
          <span>{{ scope.row.firstInvestmentTime }}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('认缴比例')" align="center" prop="shareholdingRatio" min-width="150">
        <template slot-scope="scope">
          <span>{{ scope.row.shareholdingRatio }}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('投资总金额(万)')" align="center" prop="totalSubscribedAmount" min-width="150">
        <template slot-scope="scope">
          <span>{{ moneyFormat(scope.row.totalSubscribedAmount, 'w') }}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('回款总金额(万)')" align="center" prop="paymentReceivedTotalAmount" min-width="150">
        <template slot-scope="scope">
          <span>{{ moneyFormat(scope.row.paymentReceivedTotalAmount, 'w') }}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('已实现收益(万)')" align="center" prop="realizedBenefits" min-width="150">
        <template slot-scope="scope">
          <span>{{ moneyFormat(scope.row.realizedBenefits, 'w') }}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('持有部分估值(万)')" align="center" prop="holdingPartialValuation" min-width="150">
        <template slot-scope="scope">
          <span>{{ moneyFormat(scope.row.holdingPartialValuation, 'w') }}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('IRR')" align="center" prop="irr" min-width="150">
        <template slot-scope="scope">
          <span>{{ scope.row.irr }}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('MOIC')" align="center" prop="moic" min-width="150">
        <template slot-scope="scope">
          <span>{{ scope.row.moic }}</span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>

export default {
  components: {
  },
  data() {
    return {
      // 填报数据遮罩层
      loading: true,
      // 填报数据总条数
      total: 0,
      // 弹出层标题
      title: '',
      // 是否显示弹出层
      formOpen: false,
      // 已投GP情况表格数据
      bfGpInvestmentInfoList: [],
      bfFundInvestmentInfoList: [],
      bfDealInvestmentInfoList: [],
      gpSelectedRowId: undefined,
      fundSelectedRowId: undefined,
      // 查询参数
      queryParams: {
        gpName: undefined,
        year: undefined,
        type: undefined,
        status: 'Y',
        pageNum: 1,
        pageSize: 10
      },
      // 表单参数
      form: {}
    }
  },
  created() {
    this.getList()
  },
  methods: {
    /** 查询填报数据审核列表 */
    getList() {
      this.loading = true
      this.bfGpInvestmentInfoList = [
        {
          id: 'test1',
          gpName: '上海孚腾',
          firstInvestmentTime: '2021-01-07',
          fundCount: 2,
          dealCount: 15,
          totalSubscribedAmount: 100000000,
          totalPaidInAmount: 100000000,
          paymentReceivedTotalAmount: 11000000,
          realizedBenefits: 10000000,
          holdingPartialValuation: 30000000,
          irr: '20%',
          dpi: 1.1,
          tvpi: 1.4,
          rvpi: 0.3
        },
        {
          id: 'test2',
          gpName: '中国国新控股',
          firstInvestmentTime: '2021-07-07',
          fundCount: 2,
          dealCount: 32,
          totalSubscribedAmount: 200000000,
          totalPaidInAmount: 200000000,
          paymentReceivedTotalAmount: 21000000,
          realizedBenefits: 20000000,
          holdingPartialValuation: 60000000,
          irr: '22%',
          dpi: 1.1,
          tvpi: 1.4,
          rvpi: 0.3
        }
      ]
      this.loading = false
    },
    // 表单重置
    reset() {
      this.form = {
        gpName: undefined,
        fundCount: 0,
        isAutomaticSynchronization: undefined
      }
      this.resetForm('form')
    },
    /** 搜索按钮操作 */
    queryHandle() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm('queryForm')
      this.queryHandle()
    },
    /** 删除按钮操作 */
    deleteHandle(row, index) {
      this.$confirm(this.$t('是否确认删除?'), this.$t('警告'), {
        confirmButtonText: this.$t('确定'),
        cancelButtonText: this.$t('取消'),
        type: 'warning'
      }).then(function() {
        return true
      }).then(() => {
        this.bfGpInvestmentInfoList.splice(index, 1)
        this.msgSuccess(this.$t('删除成功'))
      }).catch(function() {
      })
    },
    statusChangeHandle(row) {
      // 原始状态
      const originalStatus = row.isAutomaticSynchronization === 'Y' ? 'N' : 'Y'
      const statusFormat = this.statusFormat(row.isAutomaticSynchronization)
      this.$confirm(this.$t('此操作将 "' + statusFormat + '", 是否继续?'), this.$t('警告'), {
        confirmButtonText: this.$t('确定'),
        cancelButtonText: this.$t('取消'),
        type: 'warning'
      }).then(() => {
        // 确认后执行状态改变
        return this.msgSuccess(this.$t(statusFormat + '成功'))
      }).catch(() => {
        // 取消后重置状态
        row.isAutomaticSynchronization = originalStatus
      })
    },
    statusFormat(status) {
      return status === 'Y' ? '开启' : '关闭'
    },
    initGpName(val) {
      this.form.gpName = val.name
    },
    handleCheckboxChange(row) {
      this.bfFundInvestmentInfoList = []
      this.bfDealInvestmentInfoList = []
      this.fundSelectedRowId = undefined
      // 勾选框变化时更新选中行
      if (row.id === 'test1') {
        this.bfFundInvestmentInfoList = [
          {
            id: 'ftyq',
            fundName: '孚腾一期',
            firstInvestmentTime: '2021-01-07',
            dealCount: 8,
            subscriptionRatio: '40%',
            totalSubscribedAmount: 50000000,
            totalPaidInAmount: 50000000,
            paymentReceivedTotalAmount: 55000000,
            realizedBenefits: 5000000,
            holdingPartialValuation: 15000000,
            irr: '20%',
            dpi: 1.1,
            tvpi: 1.4,
            rvpi: 0.3
          },
          {
            id: 'fteq',
            fundName: '孚腾二期',
            firstInvestmentTime: '2021-04-07',
            dealCount: 7,
            subscriptionRatio: '40%',
            totalSubscribedAmount: 50000000,
            totalPaidInAmount: 50000000,
            paymentReceivedTotalAmount: 55000000,
            realizedBenefits: 5000000,
            holdingPartialValuation: 15000000,
            irr: '22%',
            dpi: 1.1,
            tvpi: 1.4,
            rvpi: 0.3
          }
        ]
      }
    },
    fundHandleCheckboxChange(row) {
      this.bfDealInvestmentInfoList = []
      // 勾选框变化时更新选中行
      if (row.id === 'ftyq') {
        const dealNames = ['项目A', '项目B', '项目C', '项目D', '项目E', '项目F', '项目G', '项目H']
        dealNames.forEach(item => {
          const dealInfo = {
            id: item,
            dealName: item,
            firstInvestmentTime: '2022-02-02',
            shareholdingRatio: '15%',
            totalSubscribedAmount: 10000000,
            paymentReceivedTotalAmount: 12000000,
            realizedBenefits: 2000000,
            holdingPartialValuation: 3000000,
            irr: '15%',
            moic: 1.7
          }
          this.bfDealInvestmentInfoList.push(dealInfo)
        })
      }
    },
    submitForm() {
      this.loading = true
      if (this.form.id) {
        // eslint-disable-next-line no-unused-vars
        let accountInfo = this.bfGpInvestmentInfoList.find(val => val.id === this.form.id)
        accountInfo = this.form
      } else {
        this.form.id = crypto.randomUUID()
        this.bfGpInvestmentInfoList.push(this.form)
      }
      this.loading = false
      this.formOpen = false
    }
  }
}
</script>
